<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style type="text/css">
        /*将所有标签默认的内外边距清除*/
        *{
            margin: 0px;
            padding: 0px;
            /*元素宽由width=content变为content+padding+border*/
            box-sizing: border-box;
        }
        html{
            height: 100%;
        }
        body{ /*背景图片 不重复铺设 居中*/
            background:url("img/rg_bg.jpg") no-repeat center ;
            background-size: 100% 100% ;
        }
        .rg_layout{  /*设置注册表布局框，背景颜色白色，分为三部分*/
            width: 900px;
            height: 550px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*--让div水平居中auto*/
            margin: auto;

            margin-top: 80px;

        }
        .rg_left{  /*白色注册框中左边部分*/
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        /*设置左部分p标签中文字属性*/
        .rg_left >p:first-child{ /*该类选择器下第一个p标签以及最后一个标签*/
            color:#FFD026;
            font-size: 20px;

        }
        .rg_left>p:last-child{
            color:#A6A6A6;
            font-size: 20px;

        }
        /*白色注册框中间部分*/
        .rg_center{
            /*border: 1px solid red;*/
            float: left;
            width: 540px;
        }
        /*白色注册框右边部分*/
        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }
        /*白色注册框右边部分文字属性*/
        .rg_right>p:first-child{
            font-size: 15px;
        }
        .rg_right p a{
            color: pink;
        }
        .td_left{ /*设置注册表左列元素的属性文本右对齐以及宽高*/
            width: 100px;
            text-align: right;/*文本右对齐*/
            height: 45px;
        }
        .td_right{/*设置注册表右列左内边距使input组件与右列左边界有空间*/
            padding-left: 50px;
        }/*并集选择器*/
        #username,#password{/*设置注册表右列input组件属性并让里面文字有左边距*/
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6; /*灰色*/
            border-radius: 5px; /*设置圆角*/
            padding-left: 10px; /*设置input组件内左边距*/

        }

        #btn_sub{   /*注册按钮属性设置*/
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026;/*消除边框(颜色与按钮背景颜色同)*/
        }
        .error{    /*用户名密码验证失败所显示的文字的属性*/
            color: red;
        }
        #td_sub{  /*设置注册按钮在该行中的位置，用内边距*/
            padding-left: 150px;

        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //校验密码方法
        function checkPassword(){
            //1.获取密码的值(文本输入框值)，通过name找value
            var password=$("input[name='password']").val();
            if(password==''){
                $("span[id='s_password']").html("密码不为空！").css("color", "red");
                return false;
            }else if(/^[a-zA-z]\w{5,}/.test(password) == false){
                $("span[id='s_password']").html("密码不合法！").css("color", "red");
                return false;
            }
            $("span[id='s_password']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
            return true;
        }
        //校验用户名方法
        function checkUserName(){
            //1.获取用户名的值(文本输入框值),通过name找value
            var username=$("input[name='username']").val();
            if(username==''){
                $("span[id='s_username']").html("用户名不为空！").css("color", "red");
                return false;
            }else if(username.length<3){
                $("span[id='s_username']").html("用户名不合法！").css("color", "red");
                return false;
            }
            $("span[id='s_username']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
            return true;
        }

        //就绪事件，页面都加载完成后开始执行下面代码
        $(function(){
            //给input表单项绑定离焦事件
            $("input[name='username']").blur(function(){
                checkUserName();
            });
            $("input[name='password']").blur(function(){
                checkPassword();
            });
            //给表单绑定提交事件，只有返回true表单才会提交
            $("#form").submit(function() {
                return checkUserName() && checkPassword();
            });
        })
    </script>
</head>
<body class="body">
<div class="rg_layout">
    <div class="rg_left">
        <p >用户登录</p>
        <p> USER LOGIN</p>
    </div>
    <div class="rg_center">
        <div class="rg_form">
            <!--定义表单form-->
            <form action="/login" method="post" id="form">
                <table >
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right">
                            <input type="text" name="username" id="username" placeholder="请输入用户名">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right">
                            <input type="password" name="password" id="password" placeholder="请输入密码">
                            <span id="s_password"class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" id="msg"><span style="text-align: center">${requestScope.login_msg}</span></td>
                    </tr>
                    <tr>
                    <td colspan="2" id="td_sub"><input type="submit" value="提交" id="btn_sub"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="rg_right">
        <p>已有账号<a href="login.jsp" style="color: #FFD026" >立即登录</a></p>
    </div>
</div>
</body>
</html>